<template>
  <div class="searchContainer">
    <div :class="{ optionsBox: true, isExtend: isExtend }">
      <div :class="{ optionItem: true, selected: selectedId == item.value }" v-for="(item, index) in optionsList"
        :key="index" @click="handleItemClick(item)">
        {{ item.label }}
      </div>
    </div>
    <!-- <div class="switchBtn" @click="handleSwitchBtnClick">其他地区</div> -->
  </div>
</template>

<script>
export default {
  name: "workYearSearch",
  data() {
    return {
      optionsList: [
        { value: "", label: "全部" },
        { value: "10", label: "不限" },
        { value: "20", label: "0-1年" },
        { value: "30", label: "1-3年" },
        { value: "40", label: "3-5年" },
        { value: "50", label: "5-10年" },
        { value: "60", label: "10年+" },
      ],
      selectedId: "",
      isExtend: false,
    };
  },
  methods: {
    handleItemClick(item) {
      this.selectedId = item.value;
      this.$emit("change", item);
    },
    handleSwitchBtnClick() {
      this.isExtend = !this.isExtend;
    },
  },
};
</script>

<style lang="scss" scoped>
.searchContainer {
  display: flex;
  align-items: flex-start;
  .optionsBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1000px;
    height: 26px;
    overflow: hidden;
    transition: height 0.2s;
    .optionItem {
      color: #555;
      float: left;
      line-height: 1.2;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        background-color: #e2f3ff;

        color: #0b6eff;
      }
    }
    .selected {
      background-color: #e2f3ff;

      color: #0b6eff;
    }
    &.isExtend {
      height: auto;
      transition: height 0.2s;
    }
  }
  .switchBtn {
    color: #999;
    cursor: pointer;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
